<template>
    <div class="tim">
        <h1 class="tit">团队概述</h1>
        <el-row>
        <el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24">
            <el-card>
                <div class="icon1">
                    <svg-icon icon-class="use"></svg-icon>
                    <h2>直属下级代理（人）</h2>
                    <h1 class="fr">{{ agentCount.agent_count }}</h1>
                </div>
                <div class="add">
                    <h2>本月新增直属下级代理</h2>
                    <h1 class="fr">{{ agentCount.month_count }}</h1>
                </div>
            </el-card>
        </el-col>
        <el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24">
            <el-card>
                <div class="icon2">
                    <svg-icon icon-class="group-user"></svg-icon>
                    <h2>下级代理（人）</h2>
                    <h1 class="fr">{{ payCount.subordinate }}</h1>
                </div>
                <div class="add">
                    <h2>本月新增下级代理</h2>
                    <h1 class="fr">{{ payCount.month_subordinate }}</h1>
                </div>
            </el-card>
        </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
  name: 'Tim',
  props: {
    agentCount: {
      type: Object,
      required: true
    },
    payCount: {
      type: Object,
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
  @import './../../index.scss';
</style>